import { View, Popup, Image, Button } from '@hips/taro-ui'
import Styles from './user-detail.module.less'
import TendList from './user-detail-template/tend-list'
import UserInfoDetail from './user-detail-template/user-info-detail'
import { navigateTo, clearStorage } from '@tarojs/taro'
import { logOut } from 'request/api'
import { getToken } from 'tools'
export default {
  name: 'UserDetail',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    userDetail: {
      type: Object,
      default: () => {
        return { favicon: '', userName: '' }
      }
    },
    tandList: {
      type: Array,
      default: () => []
    },
    currentTendIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    value(newVal) {
      if (this.show === newVal) return
      this.show = newVal
    },
    show(newVal) {
      this.$emit('input', newVal)
    }
  },
  components: {
    Popup
  },
  data() {
    return {
      show: false,
      showConfrim: false
    }
  },
  methods: {
    /**
     * 切换租户
     * @param {*} item
     */
    changeTend(item) {
      this.$emit('chengTend', item)
    },

    /**
     * 退出登录
     */
    async logOut() {
      await logOut(getToken())
      clearStorage()
      this.showConfrim = false
      navigateTo({
        url: `/pages/login/index`
      })
    }
  },
  render() {
    const { favicon, realName } = this.userDetail
    const tandList = this.tandList
    return (
      <Popup vModel={this.show} clickOverlayClose={true} position="left">
        <View class={Styles['user-detail']}>
          <View class={Styles['user-detail-header']}>
            <Image
              class={Styles['user-detail-header-favicon']}
              src={favicon}
            ></Image>
            <View class={Styles['user-detail-header-name']}>{realName}</View>
          </View>
          <TendList
            vOn:changeTend={this.changeTend}
            tendList={tandList}
            currentTendIndex={this.currentTendIndex}
          ></TendList>
          <UserInfoDetail userDetail={this.userDetail}></UserInfoDetail>
          <View class={Styles['user-detail-bottom']}>
            <Button
              class={Styles['user-detail-bottom-logout']}
              rippleOpacity={0}
              onTap={() => {
                this.showConfrim = true
              }}
            >
              退出登录
            </Button>
          </View>
          <Popup vModel={this.showConfrim} overlay={true}>
            <View class={Styles['logout-modal']}>
              <View class={Styles['logout-modal-content']}>确定退出登录？</View>
              <View class={Styles['logout-modal-bottom']}>
                <View
                  onTap={() => {
                    this.showConfrim = false
                  }}
                >
                  取消
                </View>
                <View onTap={this.logOut}>确定</View>
              </View>
            </View>
          </Popup>
        </View>
      </Popup>
    )
  }
}
